<{use class="yii\bootstrap\BootstrapAsset"}>
<{BootstrapAsset::register($this)|void}>
<script src="/static/js/dropload.min.js"></script>
<link rel="stylesheet" href="/static/css/dropload.css">
<style>
    .mdwrap{
        margin: 10px 0px 0px 10px;height: 180px;overflow-y: auto;
    }

    .mdwrap img{
        width: 55px;height: 55px;border-radius: 50%;
    }
    .mdwrap div{
        text-align: center;margin-bottom: 10px;
    }

    .flex_row_2 .row_one:nth-child(2n-1){
        width: calc(100% + 7.5px);
    }
    .flex_row_2 .row_one:nth-child(2n){
        width: calc(100% + 7.5px);
    }
    .row_one:nth-child(2n-1) .addcart {
        right: 15px;
        margin-bottom: 12px;
    }
    .flex_row_2 .row_one:nth-child(2n-1) {
        width: calc(100% + 7.5px);
         padding-right: 0;
    }
    .row_one .addcart{
        right: 15px;
        margin-bottom: 12px;
    }

    .fit_img{
        height: 230px;
        object-fit: cover;
    }
</style>
<input name="_csrf" type="hidden" id="_csrf" value="<{$app->request->csrfToken}>">
<div class="content margin_top_foot">
    <div class="searchbar fixed_top bg_mx_green white"></div>
    <div class="refresh_content">
        <div class="pull_refresh">
            <div class="swipe">
                <div class='swipe-wrap'></div>
                <ul class="position"></ul>
            </div>

            <div class="row mdwrap">
                <{foreach $cate as $key=>$row}>
                <div class="col-md-3 col-xs-3">
                    <a href="<{$row['url']}>">
                        <img src="<{$row['thumb']}>" alt="">
                        <div><{$row['name']}></div>
                    </a>
                </div>
                <{/foreach}>
            </div>

            <div class="">
                <div class="font_16 padding_10_15 v_center margin_b_15 bg_white">
                    <span class="bg_mx_green title_mark"></span>
                    <span class="padding_l_10">热门单品</span>
                </div>
                <div class="flex_row_2 padding_h_15 pros"></div>
            </div>
        </div>
        <div class="refresh_load">
            <div class="refresh_pull_arrow"></div>
        </div>
    </div>
    <div class="sidebar fixed lineheight_4 white hide"></div>
    <div class="sidecon row padding_h_15 fixed lineheight_4 bg_white hide mx_green text_center"></div>
    <footer class="foot_tab fixed_bottom mx_green font_16"></footer>
</div>
<div class="toast"></div>
    <!-- toast模版 -->
    <script type="text/template" charset="utf-8" id='toast_template'>
        <i class="iconfont icon-toast{{=it.icon}}"></i>
        <div class="toast_text">{{=it.text}}</div>
    </script>
    <!-- 轮播模版 -->
    <script type="text/template" charset="utf-8" id='swipe_template'></script>


    <!-- 产品 -->
    <script type="text/template" charset="utf-8" id='pro_template'></script>
    <script>
        // 页面初始化
            var mycarts = get_data("cart")||{};
            var len = mycarts.total;
            loadsearchbar(function(){
                if(len){
                    $(".total").html(len);
                }else{
                    $(".total").hide();
                }
            });
            var banner = <{$slids}>;
            loadswipe(banner)
            var sale = <{$pregoods}>;
            var evalsale = doT.template($("#sale_template").text());
            loaddata(".sale",evalsale,sale);

            var hotgoods = <{$goods}>;
            var evalraising = doT.template($("#hot_template").text());
            loaddata(".hot",evalraising,hotgoods);

            var timegoods = <{$timegoods}>;
            var evalraising = doT.template($("#time_template").text());
            loaddata(".time",evalraising,timegoods);

            var newgoods = <{$newgoods}>;
            var evalraising = doT.template($("#new_template").text());
            loaddata(".new",evalraising,newgoods);

            var commandgoods = <{$commandgoods}>;console.log(commandgoods)
            var evalraising = doT.template($("#command_template").text());
            loaddata(".command",evalraising,commandgoods);


            for (var i = 0; i < timegoods.length; i++) {
                countdown(".days"+i,".hours"+i,".minutes"+i,".seconds"+i,GetTimeDiff(timegoods[i].timestart,timegoods[i].timeend),function(){
                    $("countdown"+i).html("活动已结束，下次早点来吧")
                })
            }
            var pros = <{$goods}>,evalpros;console.log(pros);
            console.log(pros);
            loadpro(pros)
            loadfootbar();
        // 购物车操作
            function cart(i){

                if(pros[i].nums <= 0){
                    toast("attention","该产品已售罄");
                    return false;
                }
                mycarts = get_data("cart")||{total:0};;
                console.log(pros[i]);
                if(!$.isEmptyObject(mycarts[pros[i].id]) && mycarts[pros[i].id].num >= pros[i].nums){
                    return false;
                }
                addcart(1,pros[i])
            }
        // 搜索
            var evalToast = doT.template($("#toast_template").text());
            $(".content").on("input",".searchbar_input input",function(){
                var that = this;
                var keywords = $(this).val();
                if(keywords){
                    $.post("/shop/site/search-goods",{keywords:keywords,_csrf:$('#_csrf').val()},function(res){
                        if(res.status && res.status == 1){
                            toast("attention",res.msg)
                        }else{
                            $(".pros").html(evalpros(res))
                        }
                     },"json")
                }
            })
            function search(obj){
                var keywords = $(obj).next().val();
                if(keywords){
                    $.post("/shop/site/search-goods",{keywords:keywords,_csrf:$('#_csrf').val()},function(res){
                        if(res.status && res.status == 1){
                            toast("attention",res.msg)
                        }else{
                            $(".pros").html(evalpros(res))
                        }
                    },"json")
                }
            }
        // 下拉加载更多
        //     var pindex = 1;
        //     var pullRefresh = new mobileRefresh({
        //         container: document.querySelector('.refresh_content'),
        //         triggerDistance: 100,
        //         type:"up"
        //     },function(){
        //         $.post("/shop/site/load-more",{pindex:++pindex,_csrf:$('#_csrf').val()},function(res){
        //             $(".pros").append(evalpros(res));
        //             pullRefresh.cancelLoading();
        //         },"json")
        //     })
    </script>


